import React from 'react'
import {fromJS,Map} from 'immutable'
class App extends React.Component{
    constructor(props){
        super(props)
        this.state={
            name:"lx",
            age:23,
            address:fromJS({
                city:"武汉",
                region:"江夏"
            }),
            hobbies:fromJS([
                {name:"javascript",desc:"是一种前端编程语言"},
                {name:"王者荣耀",desc:"一种流行手机游戏"}
            ])
        }
        this.nameRef=React.createRef()
        this.descRef=React.createRef()
    }
    add(){
        let name=this.nameRef.current.value
        let desc=this.descRef.current.value
        let newhobbies=this.state.hobbies.push(Map({name:name,desc:desc}))
        this.setState({hobbies:newhobbies})
    }
    render(){
       return(
           <div>
               name:{this.state.name},age:{this.state.age}
               address:{this.state.address.get("city")},region:{this.state.address.get("region")}
               {this.state.hobbies.map((item)=>{
                   return <div>{item.get("name")}+{item.get("desc")}</div>
               })}
               <input type="text" ref={this.nameRef}/>
               <input type="text" ref={this.descRef}/>
               <button onClick={()=>this.add()}>add</button>
           </div>
       )
    }
}
export default App
    